<template>
  <div class="showCard">
    <div class="showCardWarp">
      <h3 class="showTitle">{{show.name}}</h3>
      <ul class="aimsHandCardList">
        <li class="cardWarp"
            v-for="(item,index) in legAims.hands"
            :key="item.id"
            :data-index="index"
            @click="cardClick(item,index)"></li>
      </ul>
      <div class="aimsCardList">
        <div class="cardWarp weaponsWarp"
             v-if="legAims.equipment.weapons.id!=undefined"
             :style="{'backgroundImage':'url('+(legAims.equipment.weapons.imageUrl)+')'}"
             @click="cardClick(legAims.equipment.weapons)"></div>
        <div class="cardWarp armorWarp"
             v-if="legAims.equipment.armor.id!=undefined"
             :style="{'backgroundImage':'url('+(legAims.equipment.armor.imageUrl)+')'}"
             @click="cardClick(legAims.equipment.armor)"></div>
        <div class="cardWarp defenseHorseWarp"
             v-if="legAims.equipment.defenseHorse.id!=undefined"
             :style="{'backgroundImage':'url('+(legAims.equipment.defenseHorse.imageUrl)+')'}"
             @click="cardClick(legAims.equipment.defenseHorse)"></div>
        <div class="cardWarp pursuitHorseWarp"
             v-if="legAims.equipment.pursuitHorse.id!=undefined"
             :style="{'backgroundImage':'url('+(legAims.equipment.pursuitHorse.imageUrl)+')'}"
             @click="cardClick(legAims.equipment.pursuitHorse)"></div>
        <div class="cardWarp kitWarpLe"
             v-if="legAims.judgment.NoHome.have"
             :style="{'backgroundImage':'url('+(legAims.judgment.NoHome.imageUrl)+')'}"
             @click="cardClick(legAims.judgment.NoHome)"></div>
        <div class="cardWarp kitWarpDian"
             v-if="legAims.judgment.lightning.have"
             :style="{'backgroundImage':'url('+(legAims.judgment.lightning.imageUrl)+')'}"
             @click="cardClick(legAims.judgment.lightning)"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      legAims: this.Leg[this.show.aimsId],
      whoUse: this.Leg[this.show.userId]
    }
  },
  props: ['show', 'Leg'],
  created () {
  },
  methods: {
    cardClick (e, i) {
      e.user = this.whoUse.id
      e.operating = '弃置'
      e.aims = this.legAims.id
      i = i != undefined ? i : -1
      let funName
      if (this.show.name == '过河拆桥') {
        funName = 'gh'
      } else if (this.show.name == '顺手牵羊') {
        funName = 'ss'
      }
      this.$emit(funName, e, this.whoUse, this.legAims, i)
    }
  }
}
</script>
<style scoped>
.showCard {
  position: absolute;
  z-index: 98;
  top: 60px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
}
.showCardWarp {
  position: relative;
  margin-top: 20px;
  width: 1650px;
  height: 600px;
  background: url("../game/j.png") no-repeat;
  background-size: 100% 100%;
}
.showTitle {
  position: absolute;
  font-size: 2.3em;
  font-weight: bold;
  background-image: -webkit-linear-gradient(bottom, #805937, #f0db65, #faf7d5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  top: 8px;
  left: 50%;
  margin-left: -65px;
  line-height: 100%;
}
.cardWarp {
  height: 205px;
  width: 159px;
  background: url("../game/card-back.png");
  background-size: 100% 100%;
  border-radius: 10px;
  cursor: pointer;
}
.cardWarp:hover {
  box-shadow: 2px 2px 5px #fff;
  transition: all 0.3s;
}
.aimsHandCardList,
.aimsCardList {
  position: absolute;
  top: 85px;
  left: 220px;
  width: 66%;
  height: 215px;
  background: rgba(72, 65, 56, 0.8);
  border-radius: 10px;
  display: flex;
  justify-content: start;
  align-items: center;
}
.aimsHandCardList li {
  margin-right: 5px;
}
.aimsCardList {
  background: transparent;
  top: 320px;
  width: 66.5%;
  margin-left: -5px;
}
.aimsCardList div {
  height: 100%;
}
.aimsCardList .weaponsWarp {
  margin-left: 0;
}
.aimsCardList .armorWarp {
  margin-left: 10px;
}
.aimsCardList .defenseHorseWarp {
  margin-left: 10px;
}
.aimsCardList .pursuitHorseWarp {
  margin-left: 10.5px;
}
.aimsCardList .kitWarpLe {
  margin-left: 100px;
}
.aimsCardList .kitWarpDian {
  margin-left: 10.58px;
}
</style>
